// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the GNU Affero General Public License v3.0.
// See the LICENCE file in the repository root for full licence text.

@circle-size: 64px;
@animation-length: 1.6s;
@animation-delay: (@animation-length / 4);

.loading-overlay {
  @_top: loading-overlay;
  backface-visibility: hidden;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9998;
  user-select: none;

  display: flex;

  align-items: center;
  justify-content: center;

  opacity: 0;
  pointer-events: none;
  will-change: opacity;

  &::before {
    .full-size();
    content: "";
    background-color: #000;
    will-change: opacity;
  }

  &--visible {
    opacity: 1;
    pointer-events: auto;

    &::before {
      animation: loading-overlay--background-color 10s 1 linear;
      animation-fill-mode: forwards;
    }
  }

  &__container {
    width: @circle-size*4;
    height: @circle-size;
    position: relative;
  }

  &__circle {
    width: @circle-size;
    height: @circle-size;
    position: absolute;

    border: solid 3px #fff;

    animation-duration: @animation-length;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-fill-mode: both;

    will-change: transform, opacity;

    &--1 {
      @colour: #8866ee;
      background-color: @colour;
      border-color: @colour;

      left: 0%;
      top: 0%;
    }

    &--2 {
      @colour: #ff55cc;
      background-color: @colour;
      border-color: @colour;

      left: 25%;
      top: 100%;

      animation-delay: @animation-delay;
    }

    &--3 {
      @colour: #66ccff;
      background-color: @colour;
      border-color: @colour;

      left: 50%;
      top: 0%;

      animation-delay: @animation-delay*2;
    }

    &--4 {
      @colour: #ffcc22;
      background-color: @colour;
      border-color: @colour;

      left: 75%;
      top: 100%;

      animation-delay: @animation-delay*3;
    }

    &--approach {
      border-radius: 100%;
      background-color: transparent;

      .@{_top}--visible & {
        animation-name: loading-overlay--circle-approach;
      }
    }

    &--hit {
      box-shadow: 0 0 10px fade(#000, 20%);
      border-radius: 100%;
      border-color: #fff;

      .@{_top}--visible & {
        animation-name: loading-overlay--circle-burst;
      }
    }
  }

  &__follow-point {
    color: #fff;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 0;
    height: 0;
    top: 100%;
    opacity: 0;

    font-weight: bold;
    font-size: 24px;

    animation-duration: @animation-length;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    will-change: opacity;

    @animation-delay-start: (@animation-delay / 8);

    .@{_top}--visible & {
      animation-name: loading-overlay--follow-point;
    }

    &--1 {
      transform: rotate(45deg);
      left: 25%;

      animation-delay: @animation-delay-start;
    }

    &--2 {
      transform: rotate(-45deg);
      left: 50%;
      animation-delay: @animation-delay-start + @animation-delay;
    }

    &--3 {
      transform: rotate(45deg);
      left: 75%;
      animation-delay: @animation-delay-start + @animation-delay*2;
    }

    &--4 {
      display: none;
    }
  }
}

@keyframes loading-overlay--circle-approach {
  0% {
    transform: scale(1);
    opacity: 0;
  }

  20% {
    transform: scale(0.5);
    opacity: 1;
  }

  20.1%,
  100% {
    transform: scale(0.5);
    opacity: 0;
  }
}

@keyframes loading-overlay--circle-burst {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }

  20% {
    transform: scale(0.5);
    opacity: 1;
  }

  40%,
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

@keyframes loading-overlay--background-color {
  0% {
    opacity: 0;
  }

  10% {
    opacity: 0.5;
  }

  100% {
    opacity: 0.7;
  }
}

@keyframes loading-overlay--follow-point {
  10% {
    opacity: 0.8;
  }

  40% {
    opacity: 0.8;
  }

  50% {
    opacity: 0;
  }
}
